@charset "utf-8";
/* CSS Document */


body{
	margin:0;
	padding:0;
	background:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	color:#333;
	font-size:12px;
}
.clear{clear:both;}


/*-------HEADER------*/
header{
	position:relative;
	padding:0 45px 5px 0px;
	background:url(../images/bg_header.png) #F0F1F4;
	border-bottom:3px solid #D8DDE1;
	color:#333;
	border-top:4px solid #cee5ff;
	overflow:hidden;
	height:74px;
	transition:height .3s;
	-moz-transition:height .3s;
	-webkit-transition:height .3s;
}
header .logo{
	float:left;
	margin-top:5px;
	margin-left:20px;
	width:153px;
}
header ul.menu_great{
	margin:0;
	padding:35px 0 0;
	list-style-type:none;
	float:left;
	position:relative;
}
header ul.menu_great li{
	float:left;	
	height:30px;
}
header ul.menu_great li a{
	padding:5px;
	margin:0 7px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#788b9a;
	text-decoration:none;
	font-weight:bold;
	border-radius:5px;
}
header ul.menu_great li a:hover{color:#09F;}
header ul.menu_great li ul{
	width:805px;
	height:100px;
	overflow:hidden;
	padding:0 10px;
	position:absolute;
	display:none;
	left:0;
	top:65px;
	list-style-type:none;
	border-radius:5px;
}
header ul.menu_great li ul li{
	width:150px;
	padding:0 5px;
	float:left;
	border-right:1px dotted #CCC;
}
header ul.menu_great li ul li{height:auto;}
header ul.menu_great li ul li a{
	font-size:14px;
	font-weight:normal;
	border-radius:5px;
	margin:1px 0;
	padding:3px 7px;
	display:block;
	color:#999;
	font-family:Arial, Helvetica, sans-serif;
	text-shadow:none;
}
header ul.menu_great li ul li a:hover{background:#a8d1ff;color:#333;}

header ul.menu_great li.reg a{
	background:#91bdee;
	color:#FFF;
	padding:6px 10px;
	border-bottom:1px solid #FFF;
	box-shadow:0 0 3px rgba(0,0,0,.2) inset;
}
header ul.menu_great li.reg a:hover{text-shadow:0 1px 0 #888;}

/*-------HOT_POST------*/
.hotPost_container{
	background:#f5f5f5;
	border-top:1px solid #FFF;
	padding:20px 0 5px;	
}
.hotPost_main{
	width:960px;	
	margin:0px auto;	
}
.hotPost_main .threePost{	
	width:33.33%;
	float:left;
}
.hotPost_main .threePost .hotPost{
	height:200px;
	margin:5px;
	background:#fff;
	box-shadow:0 0 3px rgba(0,0,0,.2);
	border-radius:3px;	
}


/*-------MAIN------*/
#main{
	border-bottom:3px solid #CCC;
	//border-top:1px solid #FFF;
	background:url(../images/back_page.png) repeat-x;
	padding:10px 0 20px;
	position:relative;
}
.changeDate_btn{
	position:fixed;
	height:35px;
	width:35px;
	border-radius:5px 0 0px 5px;
	background:url(../images/timer.png) no-repeat center center #9aa9b8;
	right:0;
	top:150px;
	z-index:90;
	cursor:pointer;
}

#main .timeline{
	position:absolute;
	top:0;
	right:0;
	width:100px;
	z-index:91;
	display:none;
}
#main .timeline .hideline{
	text-align:right;
	padding:0px 5px 3px;
	margin:10px 0px 5px 50px;
	line-height:12px;
	font-size:16px;
	color:#98b1c8;
	cursor:default;
	width:20px;
}
#main .timeline .hideline:hover{
	background:#c0d6ea;
	color:#627c94;
}
#main .timeline ul.year{
	margin:0px 0 10px 10px;
	padding:0;
	list-style-type:none;
}
#main .timeline ul.year li{
	padding:3px 5px;
	margin:1px 0;
	color:#98b1c8;
	border-left:3px solid #98b1c8;
	cursor:default;
}
#main .timeline ul.year li:hover{
	color:#83919f;
	border-left:3px solid #83919f;
}
#main .timeline ul.year li ul.month{
	font-size:11px;
	margin:0;
	padding:0;
	list-style-type:none;
	display:none;
}
#main .timeline ul.year li ul.month li{
	border:none;
	padding:0px 5px;
}
#main .timeline ul.year li ul.month li:hover{
	border:none;
}
#main .timeline ul.year li ul.month li a{
	color:#98b1c8;
	text-decoration:none;
}
#main .timeline ul.year li ul.month li a:hover{
	color:#83919f;
	text-decoration:underline;
}
#main .timeline ul.year li ul.month li a.active{
	font-weight:bold;
	color:#6d7986;
}



/*------TOPIC------*/
.topic_main{
	margin:10px auto 30px;
	padding:0 10px 0 10px;
	clear:both;
}
.topic_main .container_topic{
	float:left;
	width:175px;
	height:370px;
	margin:10px 8px;
	padding:0px 0px 25px;
	overflow:hidden;	
	transition:top .4s,left .4s;
	-moz-transition:top .4s,left .4s;
	-webkit-transition:top .4s,left .4s;
}

.topic_main .date_topic{
	background:#ededed;
	color:#fff;
}
.topic_main .date_topic .date{
	font-size:107px;
	font-family:'UTMBebasRegular', Arial, Helvetica, sans-serif;
	float:left;
	color:#83919f;
	padding-left:5px;
}
.topic_main .date_topic .day{
	text-transform:uppercase;
	font-size:33px;
	padding:32px 5px 0 0;
	float:right;
	color:#9eb1c9;
}
.topic_main .date_topic .month{
	float:right;
	font-size:61px;
	line-height:44px;
	padding-right:5px;
	color:#98b1c8;
}
.topic_main .date_topic .year{
	clear:both;
	text-align:center;
	font-size:100px;
	line-height:40px;
	font-family:'UTMBebasRegular', Arial, Helvetica, sans-serif;
	color:#98b1c8;
}
.topic_main .date_topic .count_topic{
	text-align:right;
	padding:60px 10px 0 0;
	color:#888;
	font-size:11px;
}
.topic_main .date_topic .count_topic span{
	font-size:19px;
	color:#555;
	text-shadow:0 1px 0 #f5f5f5;
	font-family:'UTMBebasRegular', Arial, Helvetica, sans-serif;
}

.topic_main .topic{
	//border-left:1px solid #CCC;
}
.topic_main .topic .category{
	width:100%;
	height:20px;
	margin-bottom:5px;
}
.topic_main .topic .category > a{
	float:left;
	display:block;
	width:24px;
	height:20px;
	overflow:hidden;
	text-indent:-999px;
	padding-left:2px;
	font-size:10px;
	color:#FFF;
	text-decoration:none;
	opacity:0.5;
	filter: alpha(opacity=50);
	background-position:center center;
	background-repeat:no-repeat;
}
.topic_main .topic .category > a:hover{opacity:1;filter: alpha(opacity=100);}

/*--CATEGORY--*/
.topic_main .topic .category a.design{
	background-image:url(../images/category/design.png);
}
.topic_main .topic .category a.travel{
	background-image:url(../images/category/dulich.png);
}
.topic_main .topic .category a.food{
	background-image:url(../images/category/amthuc.png);
}

/*--5Star--*/
.topic_main .topic .category .star_main{
	height:15px;
	float:right;
	width:80px;
	margin-top:5px;
	background:url(../images/star.png) no-repeat;
}
.topic_main .topic .category .star_main .star{
	height:15px;
	background:url(../images/star_ac.png) no-repeat;
}


.topic_main .topic h1{
	margin:7px 0;
	max-height:40px;
	overflow:hidden;	
	clear:both;
}
.topic_main .topic h1 a{
	color:#454545;
	text-decoration:none;
	font-size:11px;
	text-align:justify;
	line-height:13px;
}
.topic_main .topic h1 a:hover{color:#718ba2;}
.topic_main .topic a.pic{
	position:relative;
	display:block;
	overflow:hidden;
	max-height:220px;
	margin:5px auto;
	text-decoration:none;
}
.topic_main .topic a.pic img{
	width:100%;
	margin:0px auto;
	display:block;
	border:none;
}
.topic_main .topic a.pic .panel{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.3);
	opacity:0;
	transition:opacity 0.3s;
	-moz-transition:opacity 0.3s;
	-webkit-transition:opacity 0.3s;
}
.topic_main .topic a.pic .panel:hover{
	opacity:1;
}
.topic_main .topic a.pic .panel .readmore{
	position:absolute;
	background:url(../images/readmore.png) no-repeat;
	height:20px;
	width:62px;
	padding:0px 0 0 20px;
	color:#FFF;
	font-size:13px;
	line-height:22px;
	top:50%;
	left:50%;
	margin:-10px 0 0 -41px;
	font-family:'Medium', Arial, Helvetica, sans-serif;
	overflow:hidden;
	filter: alpha(opacity=0);
}
.topic_main .topic .quote{
	overflow:hidden;
	text-align:justify;
	font-size:11px;
	line-height:15px;
	color:#888;
}

.topic_main .topic .barbottom{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	padding-top:20px;
	background:#FFF;
	//border-top:1px solid #EEE;
}
.topic_main .topic .barbottom .comment_numb{
	background:url(../images/icon_comment.png) no-repeat 5px 4px;
	border-right:1px dotted #AAA;
	height:12px;
	float:left;
	padding:2px 5px 3px 20px;
	text-shadow:1px 1px 0 #FFFFFF;
	font-size:11px;
	color:#666;
}
.topic_main .topic .barbottom .author{
	float:left;
	height:12px;
	padding:2px 0 3px 5px;
	font-size:10px;
	color:#999;
}
.topic_main .topic .barbottom .author a{
	color:#555;
	padding-left:5px;
	text-decoration:none;
}
.topic_main .topic .barbottom .author a:hover{
	color:#333;
	text-decoration:underline;
}



/*-------FOOTER------*/
#footer{
	background:#f2f2f2;
	height:150px;
	border-top:1px solid #FFF;	
}

#wlt-PictureScroll{
	background:url(../images/top.png) no-repeat;
	width:50px;
	height:50px;
	position:fixed;
	bottom:40px;
	right:20px;
	cursor:pointer;
	opacity:0;
	//transition: opacity .4s;
	//-moz-transition: opacity .4s;
	//-webkit-transition: opacity .4s;
}